<template>
  <div style="position: relative;" class="bgwrite">
    <div class="phone_menu1" id="phone_menu1" @scroll="onScroll">
      <div id="phone_menu1-box">
        <div class="phone_menu_body" v-for="(it,index) in list" :key="index">
          <div class="phone_menu_item" v-for="(item,i) in toArr(it)" :key="i">
            <div class="phone_menu_item_icon">
              <a @click.prevent="href_inspect(item.links)">
                <van-image :src="item.piclink" class="img-box-vip">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                  <template v-slot:error>
                    <img src="../../../assets/img/icon01.3ab45344.png" alt />
                  </template>
                </van-image>
              </a>
            </div>
            <p>{{item.title}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="phone_menu1-line"></div>
    <div class="line-act" :style="{width:list.length+'0%'}" v-show="list.length>1">
      <div
        class="line-act-active"
        :style="{left:activeWidth+'%',width:(100/list.length)+'%'}"
        id="line-act-active"
      ></div>
    </div>
    <div class="phone_menu1-yz"></div>
  </div>
</template>

<script >
import { Image, Loading } from "vant";
export default {
  name: "phone_menu",
  props: ["menuList"],
  data() {
    return {
      leftWidth: 0,
      activeWidth: 0
    };
  },
  components: {
    // eslint-disable-next-line vue/no-unused-components
    [Image.name]: Image,
    // eslint-disable-next-line vue/no-unused-components
    [Loading.name]: Loading
  },
  computed: {
    list() {
      try {
        var arr = this.menuList.banner;
        var arr1 = [];
        if (typeof arr == "object") {
          let len = arr.length;
          let n = 8; //假设每行显示10个
          let lineNum = len % n === 0 ? len / n : Math.floor(len / n + 1);
          for (let i = 0; i < lineNum; i++) {
            // slice() 方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。
            let temp = arr.slice(i * n, i * n + n);
            arr1.push(temp);
          }
          return arr1;
        } else {
          return [];
        }
      } catch (error) {
        return [];
      }
    }
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      var id1 = document.getElementById("phone_menu1-box"); //phone_menu1
      var width = document.getElementById("phone_menu1").clientWidth;
      id1.style.width = width * this.list.length + "px";
    });
  },
  methods: {
    onScroll(e) {
      var scrollLeft = e.target.scrollLeft;
      this.leftWidth = e.target.scrollWidth;
      this.activeWidth = (scrollLeft / this.leftWidth) * 100;
    },
    toArr(arr) {
      if (typeof arr == "object") {
        return arr;
      } else {
        return [];
      }
    },
    href_inspect(val) {
      if (val == "/plugin/turntable") {
        this.$store.commit("set_turnshow", true);
        return;
      }
      if (val == "" || val == null || val == undefined) {
        this.$toast.fail("功能暂时未开放");
      } else {
        if ((val + "").indexOf("http") >= 0 || (val + "").indexOf("www") >= 0) {
          window.location.href = val;
        } else {
          this.$router.push(val);
        }
      }
    }
  }
};
</script>
<style lang='less' scoped>
.phone_menu1-yz {
  height: 12px;
  background: #fff;
  position: absolute;
  bottom: 4px;
  width: 100%;
  z-index: 11;
}
.phone_menu {
  width: 94%;
  /* height: 160px; */
  padding: 10px 0 0;
  margin: 10px auto 0 auto;
  background-color: #ffffff;
  border-radius: 5px;
  z-index: 10;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.phone_menu_body {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.phone_menu_item {
  width: 20%;
  height: 50%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.phone_menu_item_icon {
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.phone_menu_item_icon img {
  width: 40px;
  display: block;
}

.phone_menu_item p {
  font-size: 11px;
  color: #797474;
  text-align: center;
  margin-top: -4px;
  padding-top: 3px;
  padding-bottom: 10px;
}

.phone_menu1-line {
  height: 4px;
  margin-top: -6px;
  background: #fff;
  position: relative;
  z-index: 11;
}
.bgwrite {
  width: 94%;
  margin: 0 auto;
  border-radius: 0.13333rem;
}
.img-box-vip {
  width: 40px;
  height: 40px;
}
.phone_menu1 {
  width: 100%;
  background-color: #fff;
  flex-wrap: nowrap;
  overflow-x: auto;
  // overflow-y: hidden;
  padding: 0.26667rem 0 0;
  margin: 0.26667rem auto 0 auto;
  border-radius: 0.13333rem;
  z-index: 10;
  position: relative;
  > div {
    width: 750px;
    display: flex;
  }
  .phone_menu_body {
    a {
      display: flex;
    }
  }
  .phone_menu_item {
    height: auto;
  }
}
.line-act {
  position: absolute;
  bottom: 0px;
  left: 50%;
  width: 60px;
  height: 4px;
  margin: 0 auto;
  background: #ddd;
  border-radius: 27px;
  overflow: hidden;
  transform: translate3d(-50%, -50%, 0);
  z-index: 12;
  .line-act-active {
    background-color: #ffb309;
    position: absolute;
    width: 50%;
    height: 100%;
    border-radius: 27px;
  }
}
</style>
